<template>
  <div style="text-align: left">
    <el-button class="add-button" type="success" @click="dialogFormVisible = true; updateRoomStatus = false">员工注册</el-button>
    <el-dialog
      title="员工注册"
      :visible.sync="dialogFormVisible"
      @close="clear">
      <el-form :rules="rules" :model="form" style="text-align: left" ref="form">
        <el-form-item label="账号" :label-width="formLabelWidth" prop="userName">
          <el-input v-model="form.userName" autocomplete="off" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth" prop="passWord">
          <el-input type="password" v-model="form.passWord" autocomplete="off" placeholder="请输入需要的密码"></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="staffName">
          <el-input v-model="form.staffName" autocomplete="off" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="工号" :label-width="formLabelWidth" prop="staffNumber">
          <el-input v-model="form.staffNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门" :label-width="formLabelWidth" prop="departmentName">
          <el-select v-model="form.departmentName" placeholder="请选择部门">
            <el-option label="人事部" value="人事部"></el-option>
            <el-option label="前厅部" value="前厅部"></el-option>
            <el-option label="客房部" value="客房部"></el-option>
            <el-option label="餐饮部" value="餐饮部"></el-option>
            <el-option label="娱乐部" value="娱乐部"></el-option>
            <el-option label="保安部" value="保安部"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="职称" :label-width="formLabelWidth" prop="staffTitle">
          <el-select v-model="form.staffTitle" placeholder="请选择职称">
          <el-option label="主管" value="主管"></el-option>
          <el-option label="副主管" value="副主管"></el-option>
          <el-option label="员工" value="员工"></el-option>
          <el-option label="临时工" value="临时工"></el-option>
            <el-option label="接待" value="接待"></el-option>
            <el-option label="打扫" value="打扫"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item style="margin-left: 53px" label="入职日期" prop="staffEntryTime">
          <el-date-picker
            v-model="form.staffEntryTime"
            type="date"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="工资" :label-width="formLabelWidth" prop="staffSalary">
          <el-input v-model="form.staffSalary" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="奖金" :label-width="formLabelWidth" prop="staffBonus">
          <el-input  v-model="form.staffBonus" autocomplete="off" placeholder=""></el-input>
        </el-form-item>

        <el-form-item label="权限" :label-width="formLabelWidth" prop="role">
          <el-select v-model="form.role" placeholder="请选择职称">
            <el-option label="主管权限" value="1"></el-option>
            <el-option label="副主管权限" value="3"></el-option>
            <el-option label="员工权限" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'EditForm',
    data () {
      return {
        dialogFormVisible: false,
        updateRoomStatus: false,
        form: {
          staffName: '',
          staffNumber: '',
          staffTitle: '',
          staffEntryTime: '',
          staffSalary: '',
          staffBonus: '',
          departmentName: '',
          role:'',
          userName:'',
          passWord:''
        },
        rules:{
          userName: [{required: true, message: '请输入账号', trigger:'blur'}],
          passWord: [{required: true, message: '请输入密码', trigger:'blur'}],
          staffName: [{required: true, message: '请输入姓名', trigger:'blur'}],
          staffNumber: [{required: true, message: '请输入工号', trigger:'blur'}],
          departmentName: [{required: true, message: '请输入部门', trigger:'blur'}],
          staffTitle: [{required: true, message: '请输入职称', trigger:'blur'}],
          staffEntryTime: [{required: true, message: '请输入入职日期', trigger:'blur'}],
          staffSalary: [{required: true, message: '请输入工资', trigger:'blur'}],
          staffBonus: [{required: true, message: '请输入奖金', trigger:'blur'}],
          role: [{required: true, message: '请输入权限', trigger:'blur'}],
        },
        allFreeRoom:[],
        formLabelWidth: '120px'
      }
    },
    methods: {
      clear () {
        this.form = {
          staffName: '',
          staffNumber: '',
          staffTitle: '',
          staffEntryTime: '',
          staffSalary: '',
          staffBonus: '',
          departmentName: '',
          role:'',
          userName:'',
          passWord:''
        };
          this.allFreeRoom = [];
      },
      onSubmit () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            if (this.updateRoomStatus === false) {
              this.$axios
                .post('/insertStaff', {
                  staffName: this.form.staffName,
                  staffNumber: this.form.staffNumber,
                  staffTitle: this.form.staffTitle,
                  staffEntryTime: this.form.staffEntryTime,
                  staffSalary: this.form.staffSalary,
                  staffBonus: this.form.staffBonus,
                  departmentName: this.form.departmentName,
                  role: this.form.role,
                  userName: this.form.userName,
                  passWord: this.form.passWord
                }).then(resp => {
                if (resp && resp.code === 200) {
                  this.dialogFormVisible = false;
                  this.updateRoomStatus = false;
                  this.$emit('onSubmit')
                }
              })
            } else {
              this.$axios.post('/updateStaff', {
                staffName: this.form.staffName,
                staffNumber: this.form.staffNumber,
                staffTitle: this.form.staffTitle,
                staffEntryTime: this.form.staffEntryTime,
                staffSalary: this.form.staffSalary,
                staffBonus: this.form.staffBonus,
                departmentName: this.form.departmentName,
                role: this.form.role,
                userName: this.form.userName,
                passWord: this.form.passWord
              }).then(resp => {
                if (resp && resp.code === 200) {
                  this.dialogFormVisible = false;
                  this.updateRoomStatus = false;
                  this.$emit('onSubmit')
                }
              })
            }
          } else {
            this.$message.error('请输入所有字段！');
            return false;
          }
        })
      },
    }
  }
</script>

<style scoped>
  .add-button {
    margin: 18px 0 0 10px;
  }
</style>
